<template>
  <div>
    <div class="title">基本信息</div>
    <div class="companyse_time">
      <div class="l" style="border-right: none">
        <img src="../../assets/image/容器(1).png" alt=""/>
        <span>开通时间：{{ elemsg.eleProductOpenTime }}</span>
        <div class="ykttag" v-if="elemsg.isOpenEleSign===1">已开通</div>
      </div>
    </div>
    <div class="msgtable">
      <div class="table-list">
        <div class="tr">
          <div class="td">所属销售：</div>
          <div class="td td_content">{{ elemsg.eleSaleName }}</div>
          <div class="td">剩余签署：</div>
          <div
              class="td td_content"
              style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        "
          >
            <span>{{ elemsg.eleAmount ? elemsg.eleAmount : '--' }}/份</span>
          </div>
        </div>
        <div class="tr">
          <div class="td">合同操作人：</div>
          <div class="td td_content myflex">{{ elemsg.userName }}
            <div class="ykttagc" v-if="elemsg.status===1">已激活</div>
            <div class="ykttagc" v-if="elemsg.status===0">未激活</div>
          </div>
          <div class="td">身份证：</div>
          <div class="td td_content">
            {{ elemsg.idCardNo }}
          </div>
        </div>
        <div class="tr">
          <div class="td">手机号：</div>
          <div
              class="td maxcontent"
              style="
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                        "
          >
            <span>{{ elemsg.phone }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="title">合同记录</div>
    <div class="flexbox">
      <div class="filterbox">
        <div class="lable">搜索：</div>
        <div class="lablecontent">
          <el-input v-model="htjlname" @input="changehtname" clearable placeholder="输入企业/合同名称"/>
        </div>
      </div>
      <div class="filterbox">
        <div class="lable">签署人：</div>
        <div class="lablecontent">
          <el-input v-model="htjlpersonname" @input="changehtpersonname" clearable placeholder="输入姓名/身份证号"/>
        </div>
      </div>
      <div class="filterbox">
        <div class="lable">签署状态：</div>
        <div class="lablecontent">
          <el-select v-model="htjlstatus" placeholder="请选择" @change="getqueryelecontractrecordfn">
            <el-option
                v-for="item in qsstatuslist"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="flexbox">
      <div class="filterbox">
        <div class="lable">发起时间：</div>
        <div class="lablecontent">
          <el-date-picker
              @change="getqueryelecontractrecordfn"
              v-model="htjlfqtime"
              type="date"
              placeholder="请选择时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </div>
      </div>
      <div class="filterbox">
        <div class="lable">截止时间：</div>
        <div class="lablecontent">
          <el-date-picker
              @change="getqueryelecontractrecordfn"
              v-model="htjljztime"
              type="date"
              placeholder="请选择时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </div>
      </div>
      <div class="filterbox">
        <div class="lable"></div>
        <div class="lablecontent">
          <el-button type="primary" size="default" @click="exportelesigncontractrecord">
            <el-icon>
              <Upload/>
            </el-icon>
            导出
          </el-button
          >
        </div>
      </div>
    </div>
    <div class="accounttable">
      <div
          class="tableborder"
          style="border: 1px solid #eaeaef; border-bottom: none"
      >
        <el-table
            @selection-change="handleSelectionChange"
            ref="multipleTableRef"
            :data="htjllist"
            height="450"
            style="width: 100%"
            :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="serveCompanyName" min-width="200" label="企业名称"/>
          <el-table-column prop="flowStatus" label="签署状态">
            <template #default="scope">
              <div class="mytag mygreentag" v-if="scope.row.flowStatus==='INIT'">待签署</div>
              <div class="mytag mybluetag" v-if="scope.row.flowStatus==='ALL'">已签署</div>
              <div class="mytag mygraytag" v-if="scope.row.flowStatus==='DEADLINE'">流签</div>
              <div class="mytag myredtag" v-if="scope.row.flowStatus==='REJECT'">拒签</div>
              <div class="mytag mygraytag" v-if="scope.row.flowStatus==='CANCEL'">撤销</div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="签署人">
          </el-table-column>
          <el-table-column
              min-width="150"
              prop="idCardNo"
              label="身份证"
          />
          <el-table-column
              min-width="170"
              prop="flowName"
              label="合同名称"
          />
          <el-table-column min-width="100" prop="labourCost" label="工价">
            <template #default="scope">
              {{ scope.row.labourCost ? scope.row.labourCost + '/小时' : '--' }}
            </template>
          </el-table-column>
          <el-table-column min-width="180" prop="createOn" label="发起时间">
          </el-table-column>
          <el-table-column min-width="180" prop="deadline" label="截止时间">
          </el-table-column>
          <el-table-column min-width="150" prop="flowMessage" label="签署信息">
            <template #default="scope">
              {{ scope.row.flowMessage ? scope.row.flowMessage : '--' }}
            </template>
          </el-table-column>
          <el-table-column min-width="150" prop="emergencyContact" label="紧急联系人">
          </el-table-column>
          <el-table-column min-width="150" prop="emergencyContactPhone" label="紧急联系人手机号">
          </el-table-column>
          <el-table-column min-width="150" prop="emergencyContactAddr" label="紧急联系人地址">
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationborder">
        <pagination
            :total="htjltotalcount"
            :currentPage="htjlpagenum"
            :pageSize="htjlpagesize"
            @SizeChange="changehtjlpagesize"
            @CurrentChange="changehtjlpagenum"
        ></pagination>
      </div>
    </div>
    <div class="title">合同模板</div>
    <div class="flexbox">
      <div class="filterbox">
        <div class="lable">搜索:</div>
        <div class="lablecontent">
          <el-input v-model="htmbname" @input="changehtmbname" clearable placeholder="输入企业/合同名称"/>
        </div>
      </div>
      <div class="filterbox">
        <div class="lable">创建人:</div>
        <div class="lablecontent">
          <el-input v-model="htmbcjr" @input="changehtmbcjr" clearable placeholder="输入姓名/身份证号"/>
        </div>
      </div>
      <div class="filterbox">
        <div class="lable">创建时间：</div>
        <div class="lablecontent">
          <el-date-picker
              @change="getquerycontracttemplatefn"
              v-model="htmbtime"
              clearable
              type="date"
              placeholder="请选择时间"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
          />
        </div>
      </div>
      <el-button type="primary" size="default" @click="exportcontracttemplate"
      >
        <el-icon>
          <Upload/>
        </el-icon>
        导出
      </el-button
      >
    </div>
    <div class="accounttable">
      <div
          class="tableborder"
          style="border: 1px solid #eaeaef; border-bottom: none"
      >
        <el-table
            @selection-change="handleSelectionChangehtmb"
            ref="multipleTableRef2"
            :data="htmblist"
            height="450"
            style="width: 100%"
            :header-cell-style="{
                        background: '#FAFAFC',
                        color: '#202536'
                    }"
        >
          <el-table-column type="selection" width="55"/>
          <el-table-column prop="templateName" min-width="150" label="合同名称"/>
          <el-table-column prop="flowDescription" width="150" label="合同描述">
            <template #default="scope">
              <div>{{ scope.row.flowDescription ? scope.row.flowDescription : '--' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="userName" min-width="100" label="创建人">
          </el-table-column>
          <el-table-column prop="effectiveTime" label="合同有效时间">
            <template #default="scope">
              <div>{{ scope.row.effectiveTime ? scope.row.effectiveTime + '/年' : '--' }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" min-width="150" label="创建时间"/>
          <el-table-column label="操作">
            <template #default="scope">
              <div class="blue pointer" @click="changenx(scope.row)">修改年限</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="paginationborder">
        <Pagination
            :total="htmbtotal"
            :currentPage="htmbpagenum"
            :pageSize="htmbpagesize"
            @SizeChange="changehtmbpagesize"
            @CurrentChange="changehtmbpagenum"
        ></Pagination>
      </div>
    </div>
    <!--    修改年限弹窗   -->
    <el-dialog v-model="dialogFormVisible" title="修改年限" width="400">
      <div class="flexcenterboxc">
        <div class="lable">有效年限</div>
        <el-input-number v-model="nxnum" :min="1" @change=""/>
      </div>
      <div class="flexcenterbox" style="margin-top: 20px">
        <el-button type="primary" @click="changenxsure">确定</el-button>
        <el-button @click="cancelchangenx">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {
  getqueryeleinfoapi,
  getqueryelecontractrecordapi,
  getquerycontracttemplateapi,
  updatetemplateapi,
  exportcontracttemplateapi,
  exportelesigncontractrecordapi
} from '../../api/electronicVisa/electronicVisa'
import {ElMessage, ElTable} from 'element-plus'
import {ref, reactive, computed, watch, onMounted, watchEffect} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import Pagination from '../../components/pagination.vue'
import {shake} from '../../utils/utils'
import baseurl from '../../api/env'

const nxnum = ref<any>(null)
const dialogFormVisible = ref(false)
const props = defineProps({
  companyId: {
    type: [String, Number],
    required: true,
    default: ''
  },
  companyName: {
    type: [String],
    required: true,
    default: ''
  }
})
const exportcontracttemplate = () => {
  exportcontracttemplateapi({
    searchName: htmbname.value,
    userName: htmbcjr.value,
    queryTime: htmbtime.value,
    companyId: props.companyId,
    companyName: props.companyName
  }).then((res: any) => {
    ElMessage({
      message: '导出成功',
      type: 'success',
    })
    window.location.href =
        baseurl + '/common/download?delete=true&fileName=' + res
  })
}
const exportelesigncontractrecord = () => {
  exportelesigncontractrecordapi({
    searchName: htjlname.value,
    searchFields: htjlpersonname.value,
    flowStatus: htjlstatus.value,
    createOn: htjlfqtime.value,
    deadline: htjljztime.value,
    companyId: props.companyId,
    companyName: props.companyName,
  }).then((res: any) => {
    console.log(res)
    ElMessage({
      message: '导出成功',
      type: 'success',
    })
    window.location.href =
        baseurl + '/common/download?delete=true&fileName=' + res
  })
}
const unit = ref('')
const mbid = ref('')
const changenxsure = () => {
  if (!nxnum.value) {
    ElMessage({
      message: '请输入年限',
      type: 'warning'
    })
    return
  }
  updatetemplateapi({
    effectiveTime: nxnum.value,
    unit: unit.value,
    id: mbid.value,
    companyId: props.companyId
  }).then((res: any) => {
    console.log(res, '年限')
    if (res.code === 200) {
      unit.value = ''
      mbid.value = ''
      dialogFormVisible.value = false
      getquerycontracttemplatefn()
      ElMessage({
        message: '修改成功',
        type: 'success'
      })
    }
  })
}
const cancelchangenx = () => {
  dialogFormVisible.value = false
  nxnum.value = null
  unit.value = ''
  mbid.value = ''
}
const changenx = (val: any) => {
  console.log(val)
  dialogFormVisible.value = true
  unit.value = val.unit
  mbid.value = val.id
}
const htmbtime = ref('')
const htmbcjr = ref('')
const htmbname = ref('')
const handleSelectionChangehtmb = (val: any) => {
  console.log(val)
}
const changehtmbpagenum = (val: any) => {
  htmbpagenum.value = val
  getquerycontracttemplatefn()
}
const changehtmbpagesize = (val: any) => {
  htmbpagesize.value = val
  htmbpagenum.value = 1
  getquerycontracttemplatefn()
}
const htmbpagesize = ref(10)
const htmbpagenum = ref(1)
const htmbtotal = ref(0)
const htmblist = ref<any>([])
const changehtmbcjr = () => {
  shake(getquerycontracttemplatefn, 400)
}
const changehtmbname = () => {
  shake(getquerycontracttemplatefn, 400)
}
const getquerycontracttemplatefn = () => {
  getquerycontracttemplateapi({
    searchName: htmbname.value,
    userName: htmbcjr.value,
    queryTime: htmbtime.value,
    companyId: props.companyId,
    pageSize: htmbpagesize.value,
    pageNum: htmbpagenum.value
  }).then((res: any) => {
    console.log(res, '合同模板')
    htmbtotal.value = res.totalCount
    htmblist.value = res.list
  })
}
const handleSelectionChange = (val: any) => {
  console.log(val, 'vsugh')
}
const router = useRouter()
const route = useRoute()
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleTableRef2 = ref<InstanceType<typeof ElTable>>()
const changehtname = (val: any) => {
  console.log(val)
  shake(getqueryelecontractrecordfn, 400)
}
const changehtpersonname = (val: any) => {
  console.log(val)
  shake(getqueryelecontractrecordfn, 400)
}
// onMounted(()=>{
//   getqueryelecontractrecordfn()
// })
const getqueryelecontractrecordfn = () => {
  getqueryelecontractrecordapi({
    searchName: htjlname.value,
    searchFields: htjlpersonname.value,
    flowStatus: htjlstatus.value,
    createOn: htjlfqtime.value,
    deadline: htjljztime.value,
    companyId: props.companyId,
    pageSize: htjlpagesize.value,
    pageNum: htjlpagenum.value
  }).then((res: any) => {
    console.log(res, '合同记录')
    htjltotalcount.value = res.totalCount
    htjllist.value = res.list
  })
}
const htjllist = ref<any>([])
const htjltotalcount = ref(0)
const htjlpagesize = ref(10)
const htjlpagenum = ref(1)
const qsstatuslist = ref<any>([
  {label: '全部', value: ''},
  {label: '待签署', value: 'INIT'},
  {label: '已签署', value: 'ALL'},
  {label: '流签', value: 'DEADLINE'},
  {label: '拒签', value: 'REJECT'},
  {label: '撤销', value: 'CANCEL'},
])
const htjlname = ref('')
const htjlpersonname = ref('')
const htjlstatus = ref('')
const htjlfqtime = ref('')
const htjljztime = ref('')
const changehtjlpagenum = (val: any) => {
  htjlpagenum.value = val
  getqueryelecontractrecordfn()
}
const changehtjlpagesize = (val: any) => {
  htjlpagesize.value = val
  htjlpagenum.value = 1
  getqueryelecontractrecordfn()
}
const getqueryeleinfofn = () => {
  getqueryeleinfoapi({
    companyId: props.companyId
  }).then((res: any) => {
    console.log(res, '电子签基本信息')
    elemsg.value = res
  })
}
const elemsg = ref<any>({})
watch(() => props.companyId, (newval) => {
  console.log(444444, newval)
  getqueryeleinfofn()
  getqueryelecontractrecordfn()
  getquerycontracttemplatefn()
})
</script>

<style scoped lang="scss">
.accounttable {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 32px;
}

.flexend {
  display: flex;
  align-items: flex-end;
  justify-content: end;
}

.filterbox {
  flex-shrink: 0;
  display: flex;
  align-items: center;

  .lable {
    width: 80px;
    font-size: 14px;
    color: #202536;
  }

  .lablecontent {
    width: 200px;
    flex-shrink: 0;
    margin-left: 8px;
    margin-right: 20px;
    display: flex;
    justify-content: end;
  }
}

.flexbox {
  padding: 0 12px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blue {
  color: #3e5ff5;
}

.pointer {
  cursor: pointer;
}

.msgtable {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 0 12px;

  .table-list {
    border-top: 1px solid #eaeaef;
    border-left: 1px solid #eaeaef;

    .tr {
      width: 100%;
      box-sizing: border-box;
      height: 38px;
      line-height: 38px;
      display: flex;

      .td {
        height: 100%;
        box-sizing: border-box;
        padding: 0 16px;
        width: 20%;
        background: #fafafc;
        border-right: 1px solid #eaeaef;
        border-bottom: 1px solid #eaeaef;
      }

      .td_content {
        background-color: #ffffff;
        width: 30%;
      }

      .maxcontent {
        width: 80%;
        background-color: #ffffff;
      }
    }
  }
}

.title {
  display: flex;
  background: #fafafc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box;
  height: 38px;
  display: flex;
  align-items: center;
  margin-bottom: 13px;
  padding: 0 12px;
  font-size: 14px;
  color: #3d3d3d;
}

.companyse_time {
  width: 100%;
  box-sizing: border-box;
  padding: 0 12px;
  margin-top: 12px;
  margin-bottom: 12px;
  display: flex;

  .l {
    padding-right: 20px;
    border-right: 2px solid rgba(216, 216, 216, 1);
    display: flex;
    align-items: center;

    img {
      margin-right: 10px;
    }
  }

  .r {
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    align-items: center;

    img {
      margin-right: 10px;
    }
  }
}

.mytag {
  text-align: center;
  font-size: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 2px 4px;
}

.mybluetag {
  background: rgba(80, 122, 252, .3);
  color: rgba(2, 86, 255, 1);
}

.mygreentag {
  background: rgba(229, 250, 241, 1);
  color: rgba(0, 214, 121, 1);
}

.myredtag {
  background: rgba(255, 220, 216, 1);
  color: rgba(234, 0, 0, 1);
}

.mygraytag {
  background: rgba(244, 244, 247, 1);
  color: rgba(148, 151, 177, 1);
}

.flexcenterboxc {
  display: flex;
  align-items: center;

  .lable {
    font-size: 14px;
    color: black;
    margin-right: 14px;
  }
}

.ykttag {
  display: inline-block;
  background-color: #E0EAFF;
  color: #0256FF;
  box-sizing: border-box;
  border-radius: 2px;
  margin-left: 8px;
  padding: 3px 5px;
  font-size: 12px;
}

.ykttagc {
  background-color: #E0EAFF;
  color: #0256FF;
  box-sizing: border-box;
  border-radius: 2px;
  margin-left: 8px;
  height: 20px;
  line-height: 14px;
  padding: 3px 5px;
  font-size: 12px;
}
.myflex{
  display: flex;
  align-items: center;
}
</style>
